<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车-易果网</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="whole">
        <!-- 导航栏 -->
        <div class="site-nav">
            <div class="wrap">
                <ul class="fl">
                    <li>欢迎光临易果生鲜！</li>
                    <li>
                        <img src="./img/notice.png" alt="">
                        <a href="###">网警提示</a>
                    </li>
                </ul>
                <ul class="fr">
                    <li><a href="">[登录]</a></li>
                    <li><a href="">[注册]</a></li>
                    <li class="header-first-li"><i class="fr-i1"></i></span><span class="wrap-title">我的易果</span>
                        <ul class="header-first-ul">
                            <li>我的订单</li>
                            <li>我的优惠券</li>
                            <li>我的收藏</li>
                            <li>我的悠币</li>
                            <li>我的退换货</li>
                            <li>预存款查询</li>
                            <li>立即充值</li>
                        </ul>
                        <i class="fr-i7"></i>
                    </li>
                    <li class="header-Sec-li"><i class="fr-i2"></i></span><span class="wrap-title">手机易果</span>
                        <ul class="header-Sec-ul">
                            <li class="header-Sec-ul-li"><img src="./img/qrcode_app.jpg" alt=""
                                    class="xiala-img">扫一扫下载app</li>
                            <li class="header-Sec-ul-li"><img src="./img/qrcode_wechat.jpg" alt=""
                                    class="xiala-img">易果生鲜微信</li>
                        </ul>
                        <i class="fr-i7"></i>
                    </li>
                    <li><i class="fr-i3"></i></span><span class="wrap-title">礼品卡绑定</span> </li>
                    <li><i class="fr-i4"></i></span><span class="wrap-title">礼品兑换券入口</span> </li>
                    <li><i class="fr-i5"></i></span><span class="wrap-title">营业资质</span> </li>
                    <li><i class="fr-i6"></i></span><span class="wrap-title">人才招聘</span>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 头部 -->
        <div class="header">
            <div class="wrap wrap-pad">
                <div class="logo fl">
                    <a href="../shouye.html">
                    </a>
                </div>
                <div class="steps fr">
                    <ul>
                        <li class="on">
                            <b class="b1"></b>
                            <span>我的购物车</span>
                        </li>
                        <li>
                            <i></i>
                            <b class="b2"></b>
                            <span>填写订单</span>
                        </li>
                        <li>
                            <i></i>
                            <b class="b3"></b>
                            <span>成功提交订单</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 我的购物车 -->
        <div class="cart">
            <div class="wrap clearfix">
                <!-- 购物车为空 -->
                <div class="cart-none ">
                    <p>
                        <b>
                            购物车是空的，去买点东西吧！
                            <a href="###">继续逛逛>></a>
                        </b>
                        <br>
                        您还尚未
                        <a href="###">登陆</a>
                </div>

                <!--  购物车有商品 -->
                <div class="site-box">
                    <div class="site">
                        <div class="city clearfix">
                            <div class="city-ps fl">
                                配送至:
                            </div>
                            <div class="city-tit fl">
                                上海
                            </div>
                        </div>
                        <a href="###" class="shopping">
                            继续购物>>
                        </a>
                    </div>
                    <div class="cart-box">
                        <div class="cart-header">
                            <table>
                                <tr>
                                    <th class="cart-t-check">
                                        <input type="checkbox" checked="checked">
                                        全选
                                    </th>
                                    <th class="cart-t-inof">
                                        商品信息
                                    </th>
                                    <th class="cart-t-ub" style="width:75px">
                                        悠币
                                    </th>
                                    <th class="cart-t-price">
                                        单价
                                    </th>
                                    <th class="cart-t-num">
                                        购买数量
                                    </th>
                                    <th class="cart-t-total">
                                        合计
                                    </th>
                                    <th class="cart-t-spec">
                                        规格
                                    </th>
                                    <th class="cart-t-opera">
                                        操作
                                    </th>
                                </tr>
                            </table>

                        </div>

                        <div class="cart-list">
                            <table class="cart-table">
                                <tbody class="sm_content">
                                    <!-- <tr class="items">
                                    <td class="cart-t-check">
                                        <input type="checkbox" checked="checked">
                                    </td>
                                    <td class="cart-t-img">
                                        <a href="###">
                                            <img src="./imgs/9288738084791991_300.jpg" alt="">
                                        </a>
                                    </td>
                                    <td class="cart-t-info" style="width: 249px;text-align: center;">
                                        <a href="###" class="cart-t-info-font">
                                            云南红提750g
                                        </a>
                                    </td>
                                    <td class="cart-t-ub" style="width: 75px;"></td>
                                    <td class="cart-t-price">￥28.00</td>
                                    <td class="cart-t-num">
                                        <div class="quantity-form">
                                            <a href="###" class="decrement"></a>
                                            <span class="fl" style="display: block;width: 52px;height: 21px;border: 1px solid grey;"></span>
                                            <a href="###" class="increment"></a>
                                        </div>
                                    </td>
                                    <td class="cart-t-total">
                                        ￥
                                        <span></span>
                                    </td>
                                    <td class="cart-t-spec">750g/箱</td>
                                    <td class="cart-t-opera">
                                        <a href="###">
                                            移入收藏
                                        </a>
                                        <br>
                                        <br>
                                        <a href="###">
                                            删除
                                        </a>
                                    </td>
                                </tr>  -->
                                </tbody>
                            </table>
                        </div>
                        <div class="cart-footer clearfix settle">
                            <div class="warp">
                                <div class="fl">
                                    <label>
                                        <input type="checkbox" checked="checked">
                                        全选
                                    </label>
                                    <a href="###">
                                        删除选中的商品
                                    </a>
                                    <a href="###" class="qk">
                                        清空购物车
                                    </a>
                                </div>
                                <div class="fr">
                                    <span class="ub">
                                        悠币:
                                        <em>0</em>
                                        个
                                    </span>
                                    <span class="zj">
                                        总价:
                                        <em>


                                        </em>

                                    </span>
                                    <a href="../dengluye/易果登录页.html" class="btn">
                                        去结算
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 页尾 -->
        <footer>
            <div class="content">
                <div class="over-foot clear1">
                    <div class="foot-list">
                        <div>
                            <dl>
                                <dt>新手指南</dt>
                                <dd>
                                    <p><a href="">账户注册</a></p>
                                    <p><a href="">购物流程</a></p>
                                    <p><a href="">订购方式</a></p>
                                    <p><a href="">悠币说明</a></p>
                                    <p><a href="">会员等级</a></p>
                                </dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt class="d2">付款方式</dt>
                                <dd>
                                    <p><a href="">支付方式/发票说明</a></p>
                                    <p><a href="">礼品卡章程</a></p>
                                    <p><a href="">优惠代码</a></p>
                                    <p><a href="">卡券购买章程</a></p>
                                </dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt class="d3">配送方式</dt>
                                <dd>
                                    <p><a href="">配送时间</a></p>
                                    <p><a href="">时间及范围</a></p>
                                </dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt class="d4">售货服务</dt>
                                <dd>
                                    <p><a href="">退换货政策</a></p>
                                    <p><a href="">退换货流程</a></p>
                                    <p><a href="">常见问题</a></p>
                                    <p><a href="">极速退款</a></p>
                                    <p><a href="">投诉与建议</a></p>
                                </dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt class="d5">关于我们</dt>
                                <dd>
                                    <p><a href="">公司介绍</a></p>
                                    <p><a href="">联系我们</a></p>
                                    <p><a href="">业务合作</a></p>
                                    <p><a href="">诚信举报</a></p>
                                    <p><a href="">用户协议</a></p>
                                    <p><a href="">隐私协议</a></p>
                                    <p><a href="">友情链接</a></p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="service clear1 clear">
                        <span>客服热线 400-000-7788 企业采购或团购，请转2号键咨询</span>
                        <span>周一至周日 9:00-21:00</span>
                    </div>
                    <div class="copyright">
                        <p>所有图片均受著作权保护，未经许可任何单位与个人不得使用、复制、转载、摘编，违者必究法律责任。</p>
                        <p>
                            <a href="" class="non">沪ICP备09008015号</a>
                            Copyright © 2005-2019
                        </p>
                        <p class="tubiao">
                            <a href="http://scjgj.sh.gov.cn/platform/survey/step1_phone"><img
                                    src="http://img05.yiguoimg.com/d/web/190617/00191/142933/ordermeal.png" alt=""></a>
                            <a href="http://www.shjbzx.cn/"><img
                                    src="http://img06.yiguoimg.com/d/web/190527/00191/172725/report.png" alt=""></a>
                            <a href="http://www.shjbzx.cn/"><img
                                    src="http://img06.yiguoimg.com/d/web/190510/00192/161235/wxb.png" alt=""></a>
                            <a href="http://www.yiguo.com/legal"><img
                                    src="http://img07.yiguoimg.com/d/web/171208/00652/173249/153685368061665897_121x29.png"
                                    alt=""></a>
                            <a href="javascript:;"><img
                                    src="https://img05.yiguoimg.com/d/web/190618/00191/143543/962110.png" alt=""></a>
                            <a
                                href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&entyId=20110512114405424"><img
                                    src="http://img06.yiguoimg.com/d/web/181227/00281/143951/footer_copy.jpg" alt=""
                                    class="heigh"></a>
                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010502000002">
                                <img src="http://www.beian.gov.cn/file/ghs.png" alt="">
                                <span>沪公网安备 31010502000002号</span>
                            </a>
                        </p>
                        <p>违法和不良信息举报电话 400-000-7788</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/cart.js"></script>
    <script>
        $(function () {
            $.getJSON("http://localhost/yiguoshengxian/gouwuche/api/cart.php", function (data) {
                var html = ""
                var bbb = '';
                for (var i = 0; i < data.length; i++) {
                    html = `
                    <tr class="items">
                                    <td class="cart-t-check">
                                        <input type="checkbox" checked="checked">
                                    </td>
                                    <td class="cart-t-img">
                                        <a href="###">
                                            <img src="${data[i].img_url}" alt="">
                                        </a>
                                    </td>
                                    <td class="cart-t-info" style="width: 249px;text-align: left;">
                                        <a href="###" class="cart-t-info-font">
                                           ${data[i].tittle}
                                        </a>
                                    </td>
                                    <td class="cart-t-ub" style="width: 75px;"></td>
                                    <td class="cart-t-price">${data[i].price}</td>
                                    <td class="cart-t-num">
                                        <div class="quantity-form">
                                             <span class="fl" style="display: block;width: 52px;height: 22px;border: 1px solid #CACBCB; line-height:21px;text-aling:"center"">
                                              ${data[i].num}
                                             </span>
                                        </div>
                                    </td>
                                    <td class="cart-t-total">
                                        ￥
                                        <span>${data[i].price*data[i].num}</span>
                                    </td>
                                    <td class="cart-t-spec">${data[i].content}</td>
                                    <td class="cart-t-opera">
                                        <a href="###">
                                            移入收藏
                                        </a>
                                        <br>
                                        <br>
                                        <a href="###">
                                            删除
                                        </a>
                                    </td>
                                </tr>
                    `
                    bbb = `
        <span class="count">￥${data[i].price*data[i].num}</span>
        `
                }
                $(".sm_content").html(html)
                $('.zj em').html(bbb);
            })
        })


        //         var bbb='';
        //         bbb=`
        //         <span class="count">￥${data[i].price*data[i].num}</span>
        //         `
        // $('.zj em').html(bbb);
    </script>
</body>

</html>